<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>场景视图 - 全域智慧文旅景区</title>
    <link rel="stylesheet" href="scene-style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <header class="header">
            <h1>场景视图 - 全域智慧文旅景区</h1>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 左侧数据面板 -->
            <div class="left-panel">
                <!-- 日游客数量 -->
                <div class="data-card visitor-count">
                    <div class="card-icon">👥</div>
                    <div class="card-content">
                        <div class="count">00864</div>
                        <div class="label">日游客数量</div>
                    </div>
                </div>

                <!-- 游客总览 -->
                <div class="data-card realtime">
                    <div class="card-header">
                        <span class="card-title">📈 游客总览</span>
                    </div>
                    <div class="realtime-items">
                        <div class="realtime-item">
                            <span class="item-label">本月游客总量</span>
                            <span class="item-value">4796人</span>
                        </div>
                        <div class="realtime-item">
                            <span class="item-label">本月游客增长率</span>
                            <span class="item-value">+543人</span>
                        </div>
                        <div class="realtime-item">
                            <span class="item-label">本年度游客总量</span>
                            <span class="item-value">58375人</span>
                        </div>
                    </div>
                </div>

                <!-- 景区分布统计 -->
                <div class="data-card distribution">
                    <div class="card-header">
                        <span class="card-title">📊 景区区域人流量分布</span>
                    </div>
                    <div class="chart-container">
                        <div id="distributionChart" class="chart"></div>
                    </div>
                </div>
            </div>

            <!-- 中央地图区域 -->
            <div class="map-container">
                <div class="map-background">
                    <!-- 这里将放置背景图片 -->
                    <!-- 主题公园动态标签 -->
                    <div class="theme-park-label">
                        <span class="label-text">主题公园</span>
                        <div class="info-popup">
                            <div class="popup-header">
                                <h3>🎢 主题公园</h3>
                            </div>
                            <div class="popup-content">
                                <p>集娱乐、休闲、体验于一体的大型主题公园，拥有多个主题区域和刺激的游乐设施。</p>
                                <div class="popup-stats">
                                    <div class="stat-item">
                                        <span class="stat-label">开放时间</span>
                                        <span class="stat-value">09:00-22:00</span>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-label">当前人流</span>
                                        <span class="stat-value">2,847人</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 会展中心动态标签 -->
                    <div class="exhibition-center-label">
                        <span class="label-text">会展中心</span>
                        <div class="info-popup">
                            <div class="popup-header">
                                <h3>🏢 会展中心</h3>
                            </div>
                            <div class="popup-content">
                                <p>现代化的大型会展中心，承办各类展览、会议和商务活动，设施完善，服务一流。</p>
                                <div class="popup-stats">
                                    <div class="stat-item">
                                        <span class="stat-label">展厅面积</span>
                                        <span class="stat-value">15,000㎡</span>
                                    </div>
                                    <div class="stat-item">
                                        <span class="stat-label">当前活动</span>
                                        <span class="stat-value">科技博览会</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧景点展示 -->
            <div class="right-panel">
                <!-- 天气信息 -->
                <div class="weather-card">
                    <div class="weather-temp">34°C</div>
                    <div class="weather-info">
                        <span>晴转多云</span>
                        <span>空气质量良好</span>
                    </div>
                    <div class="weather-details">
                        <span>湿度 65%</span>
                        <span>风力 2级</span>
                    </div>
                </div>

                <!-- 实时视频监控 -->
                <div class="video-monitoring">
                    <div class="monitoring-header">
                        <span class="monitoring-title">📹 实时视频监控</span>
                    </div>
                    <div class="monitoring-grid">
                        <div class="monitor-item">
                            <div class="monitor-screen">
                                <div class="monitor-overlay">
                                    <div class="monitor-status">● REC</div>
                                    <div class="monitor-time">10:30:45</div>
                                </div>
                            </div>
                            <div class="monitor-label">公园主入口</div>
                        </div>
                        <div class="monitor-item">
                            <div class="monitor-screen">
                                <div class="monitor-overlay">
                                    <div class="monitor-status">● REC</div>
                                    <div class="monitor-time">10:30:45</div>
                                </div>
                            </div>
                            <div class="monitor-label">商业街中心</div>
                        </div>
                        <div class="monitor-item">
                            <div class="monitor-screen">
                                <div class="monitor-overlay">
                                    <div class="monitor-status">● REC</div>
                                    <div class="monitor-time">10:30:45</div>
                                </div>
                            </div>
                            <div class="monitor-label">会展中心停车场</div>
                        </div>
                        <div class="monitor-item">
                            <div class="monitor-screen">
                                <div class="monitor-overlay">
                                    <div class="monitor-status">● REC</div>
                                    <div class="monitor-time">10:30:45</div>
                                </div>
                            </div>
                            <div class="monitor-label">乡村游客中心</div>
                        </div>
                        <div class="monitor-item">
                            <div class="monitor-screen">
                                <div class="monitor-overlay">
                                    <div class="monitor-status">● REC</div>
                                    <div class="monitor-time">10:30:45</div>
                                </div>
                            </div>
                            <div class="monitor-label">景区观景台</div>
                        </div>
                        <div class="monitor-item">
                            <div class="monitor-screen">
                                <div class="monitor-overlay">
                                    <div class="monitor-status">● REC</div>
                                    <div class="monitor-time">10:30:45</div>
                                </div>
                            </div>
                            <div class="monitor-label">博物馆安全出口</div>
                        </div>
                    </div>
                </div>

                <!-- 景点图片展示 -->
                <!-- <div class="attractions-grid">
                    <div class="attraction-card">
                        <div class="attraction-image"></div>
                        <div class="attraction-name">主要景点</div>
                    </div>
                    <div class="attraction-card">
                        <div class="attraction-image"></div>
                        <div class="attraction-name">文化遗址</div>
                    </div>
                    <div class="attraction-card">
                        <div class="attraction-image"></div>
                        <div class="attraction-name">自然风光</div>
                    </div>
                    <div class="attraction-card">
                        <div class="attraction-image"></div>
                        <div class="attraction-name">休闲娱乐</div>
                    </div>
                    <div class="attraction-card">
                        <div class="attraction-image"></div>
                        <div class="attraction-name">特色美食</div>
                    </div>
                    <div class="attraction-card">
                        <div class="attraction-image"></div>
                        <div class="attraction-name">民俗体验</div>
                    </div>
                </div> -->
            </div>
        </main>

        <!-- 底部功能按钮 -->
        <footer class="footer">
            <div class="function-buttons">
                <button class="func-btn active" data-function="operation">
                    <span class="btn-icon">🎯</span>
                    <span class="btn-text">运营态势</span>
                </button>
                <button class="func-btn" data-function="flow">
                    <span class="btn-icon">📊</span>
                    <span class="btn-text">客流分析</span>
                </button>
                <button class="func-btn" data-function="monitor">
                    <span class="btn-icon">🔍</span>
                    <span class="btn-text">环境监测</span>
                </button>
                <button class="func-btn" data-function="security">
                    <span class="btn-icon">🛡️</span>
                    <span class="btn-text">智慧安保</span>
                </button>
                <button class="func-btn" data-function="facility">
                    <span class="btn-icon">⚙️</span>
                    <span class="btn-text">设施管理</span>
                </button>
            </div>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>